<template>
  <div>
   <!-- 动画组件 -->
    <h1>动画组件</h1>
    <transition name="fade">
        <div v-if="flag" style="width: 200px;height: 200px;background-color: salmon;"></div>
    </transition>
    <!-- 动画组件提供了属性 
     animate.css  -->
     <transition enter-active-class="animate__animated      animate__backInDown"
            leave-active-class="animate__animated  animate__backOutUp" >
          <div v-if="flag" style="width: 200px;height: 200px;background-color: salmon;">动画库</div>
         
    </transition>
    <button @click="flag=!flag">切换</button>
    <!-- transition-group 完成一组列表的加载和移除 动画  -->
    <transition-group enter-active-class="animate__animated animate__lightSpeedInLeft"
       leave-active-class="animate__animated animate__zoomOutUp">
        <h1 v-for="item in list" :key="item">{{item}}</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: '2304BIndex',

  data() {
    return {
        flag:true,
        list:[]
    };
  },

  mounted() {
      setTimeout(() => {
          this.list=["长春","沈阳","哈尔滨","石家庄"]
      }, 5000);
  },

  methods: {
    
  },
};
</script>
<style scoped>
/* 名字-enter-active 动画激活 */
  .fade-enter-active{
     opacity: 1;
      transition: all 1s;
  }

  /* 名字-leave-active 动画离开*/
  .fade-leave-active{
     opacity: 0;
     transition: all 1s;
  }
</style>